<template>
  <div class="y-h-full y-relative">
    <router-view class="y-absolute -y-inset-1 y-z-50 y-bg-white" @refresh="onRefresh">
    </router-view>
    <yyFormTablePagination ref="yyFormTablePaginationRef" :tableConfig="tableConfig" :formConfig="formConfig"></yyFormTablePagination>
  </div>
</template>

<script>
import { sexOptions, stateOptions } from "@/constant/defaultOptions.js";
import yyFormTablePagination from "@/components/yyFormTablePagination/index.vue";
import { ADMIN_ROLE } from "@/constant/defaultGlobal";
export default {
  components: { yyFormTablePagination },
  name: "system_sysuser",
  data() {
    return {
      tableConfig: {
        tableColumn: [
          { prop: "username", label: "账号" },
          { prop: "avatar", label: "头像", img: true, avatar: true},
          { prop: "nickname", label: "昵称" },
          { prop: "phone", label: "手机号"},
          { prop: "roleList", label: "所属角色", formatter: (row) => {
            return row.roleList?.map(c => c.name).join(',');
          }},
          { prop: "sex", label: "性别", tag: true, tagOptions: sexOptions},
          { prop: "state", label: "状态", tag: true, tagOptions: stateOptions },
        ],
        tableUseSelection: false,
        tableManagerColumn: [],
        tableApi: this.$globalApi.user.sysUserListApi,
        tableDefaultParams: {
          roleId: ADMIN_ROLE
        }
      },
      formConfig: {
        formColumn: [
          { component: "yyInput", prop: "username", label: "账号" },
          { component: "yyInput", prop: "nickname", label: "昵称" },
          { component: "yyInput", prop: "phone", label: "手机号" },
          {
            component: "yySelect",
            prop: "sex",
            label: "性别",
            options: sexOptions,
          },
          {
            component: "yySelect",
            prop: "state",
            label: "状态",
            options: stateOptions,
          },
        ],
        formManagerColumn: [],
      },
    };
  },
  methods: {
    onRefresh() {
      this.$refs.yyFormTablePaginationRef.search();
    },
  },
};
</script>

<style></style>